<template>
	<view class="shouye">
		<view class="shoutop">
			<view class="city" @click="goaita()">
				<view class="citytit">
					{{city}}
				</view>
				<view class="cityicon">
					<image src="../../static/icons/chengi.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="sear" @click="gosearch()">
				<u-search placeholder="搜索医院、科室、医生、疾病" bgColor="#ffffff" height="50rpx" :showAction="false"
					v-model="keyword" disabled>
				</u-search>
			</view>
		</view>
		<view class="navlist">
			<view class="navlistmain">
				<view class="navitem" v-for="item in navlist" @click="goMyDetails(item)">
					<view class="naviteml">
						<image :src="item.imgUrl" mode="aspectFit"></image>
					</view>
					<view class="navitemr">
						<p class="navitemrtit">{{item.title}}</p>
						<p class="navitemrinfo">{{item.remark}}</p>
					</view>
				</view>

			</view>
		</view>
		<view class="banner">
			<u-swiper :list="list1" :autoplay="false" circular :indicator="true" radius="10" height="180rpx"></u-swiper>
		</view>
		<view class="notice">
			<view class="noticetit">
				<span style="color: #3F86FF;">公告</span>头条
			</view>
			<view class="nline">
				|
			</view>
			<view class="ninfo">
				<swiper class="noticeban" circular :indicator-dots="false" :vertical="true" :autoplay="true"
					:interval="2000">
					<swiper-item v-for="item in noticelist">
						<view class="contentn">{{item.title}}</view>
					</swiper-item>

				</swiper>

			</view>
		</view>
		<view class="jiuzhen">
			<swiper class="jiuzhenbanner" circular :indicator-dots="true">
				<swiper-item>
					<view class="jiuzhenmain" :style="{height: scrollerHeight}">
						<view class="jiuzhenmainall">
							<view class="jiutop">
								<view class="jiutopl">
									<view class="jiuicon">
										<image src="../../static/icons/tixing.png" mode="aspectFit"></image>
									</view>
									<view class="jiutopltit">
										就诊提醒
									</view>
								</view>
								<view class="jiutopr">
									<view class="jiutoprtit">
										请您于今日就诊
									</view>
									<view class="jiudie" @click="changejiu()">
										<image v-if="isshow==true" src="../../static/icons/shang.png" mode="aspectFit">
										</image>
										<image v-if="isshow==false" src="../../static/icons/xia.png" mode="aspectFit">
										</image>
									</view>
								</view>
							</view>
							<view class="jiuzhenxin" v-if="isshow">
								<view class="jiuxinmain">
									<view class="xintop">
										<view class="xintopname">岳*祎</view>
										<view class="xintopdep">心血管内科(河医院区)</view>
									</view>
									<view class="hosinfo">
										<view class="hosinfol">
											<view class="hosicon">
												<image src="../../static/icons/hos.png" mode="aspectFit"></image>
											</view>
											<view class="hosxin">
												<view class="hosname">郑州大学第一附属医院</view>
												<view class="hosaddress">河南省郑州市二七区建设东路1号</view>
											</view>
										</view>
										<view class="hosinfor" @click="godingwei()">
											<image src="../../static/icons/dingwei.png" mode="aspectFit"></image>
										</view>
									</view>
									<view class="jiubot">
										<view class="gogua">
											我的挂号记录>
										</view>
										<view class="jiuti">
											不再提醒
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="jiuzhenmain" :style="{height: scrollerHeight}">
						<view class="jiuzhenmainall">
							<view class="jiutop">
								<view class="jiutopl">
									<view class="jiuicon">
										<image src="../../static/icons/tixing.png" mode="aspectFit"></image>
									</view>
									<view class="jiutopltit">
										就诊提醒
									</view>
								</view>
								<view class="jiutopr">
									<view class="jiutoprtit">
										请您于今日就诊
									</view>
									<view class="jiudie" @click="changejiu()">
										<image v-if="isshow==true" src="../../static/icons/shang.png" mode="aspectFit">
										</image>
										<image v-if="isshow==false" src="../../static/icons/xia.png" mode="aspectFit">
										</image>
									</view>
								</view>
							</view>
							<view class="jiuzhenxin" v-if="isshow">
								<view class="jiuxinmain">
									<view class="xintop">
										<view class="xintopname">张*三</view>
										<view class="xintopdep">心血管内科(河医院区)</view>
									</view>
									<view class="hosinfo">
										<view class="hosinfol">
											<view class="hosicon">
												<image src="../../static/icons/hos.png" mode="aspectFit"></image>
											</view>
											<view class="hosxin">
												<view class="hosname">郑州大学第一附属医院</view>
												<view class="hosaddress">河南省郑州市二七区建设东路1号</view>
											</view>
										</view>
										<view class="hosinfor" @click="godingwei()">
											<image src="../../static/icons/dingwei.png" mode="aspectFit"></image>
										</view>
									</view>
									<view class="jiubot">
										<view class="gogua">
											我的挂号记录>
										</view>
										<view class="jiuti">
											不再提醒
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<my-nav></my-nav>
		<button @click="pay()">去预约</button>
	</view>
</template>

<script>
	import homeApi from '@/api/home'
	import homeApii from '@/api/homee'
	import homeApiii from '@/api/homeee'
	import {
		searchNav
	} from '@/api/home/search.js'
	export default {
		provide() {
			return {
				scroll: this, //必须这样传才是响应式
			}
		},
		data() {
			return {
				list1: [

				],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				title: 'Hello',
				value: "",
				city: "全部",
				show: false,
				keyword: '',
				isshow: true,
				scrollerHeight: '370rpx',
				citylist: [
					"郑州",
					"开封",
					"洛阳",
					"安阳",
					"鹤壁",
					"许昌",
					"平顶山",
					"新乡",
					"焦作",
					"周口",
					"信阳"
				],
				navlist: [],
				bannerlist: "",
				noticelist: "",
				scrollLength: 0
			}
		},
		onLoad() {
			// this.getlocation()
			// this.gettoken()
			this.getnav()
			// this.getbanner()
			// this.getnotice()
			this.getjiuzhen()
			this.navData()
		},
		methods: {
			getjiuzhen() {
				homeApiii.getjiuzhen({
					token: "123"
				}).then(res => {

				})
			},
			getnotice() {
				homeApi.getnotice({}).then(res => {
					console.log(res)
					this.noticelist = res.data
				})
			},
			pay() {
				// my.tradePay({
				//   // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
				//   tradeNO: '2023071222001477671453797471',
				//   success: (res) => {
				//     my.alert({
				//       content: JSON.stringify(res),
				//     });
				//   },
				//   fail: (res) => {
				//     my.alert({
				//       content: JSON.stringify(res),
				//     });
				//   }
				// });
				uni.navigateTo({
					url: "/pages/sousuo/search_hosp/index"
				})
			},
			getnav() {
				homeApi.getnav({}).then(res => {
					console.log(res)
					if (res.code == 4000) {
						this.navlist = res.data
					}
				})
			},
			getbanner() {
				homeApi.getbanner({}).then(res => {
					console.log(res)
					if (res.code == 4000) {
						this.bannerlist = res.data
						this.bannerlist.forEach(el => {
							this.list1.push(el.imgUrl)
						})
					}
				})
			},
			gosearch() {
				uni.navigateTo({
					url: "/pages/sousuo/index"
				})
			},
			//点击定位图标
			godingwei() {
				// 113.710018,34.753292
				my.openLocation({
					longitude: 113.70215,
					latitude: 34.747886,
					name: '绿都广场',
					address: '郑汴路76号(博览中心地铁站C口步行220米)',
					success: res => {
						console.log(res);
					},
					fail: res => {
						console.log(res);
					},
				});
			},
			changejiu() {
				this.isshow = !this.isshow
				if (this.isshow == true) {
					this.scrollerHeight = "370rpx"
				}
				if (this.isshow == false) {
					this.scrollerHeight = "100rpx"
				}
			},

			errorIDNumber(e) {
				console.log('拒绝授权', e)
			},

			getOpenUserInfo() {
				my.getOpenUserInfo({
					success: (res) => {
						let userInfo = JSON.parse(res.response).response
						console.log(userInfo)
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			getPhoneNumber() {
				console.log(123)
				my.getPhoneNumber({
					success: (res) => {
						let encryptedData = res.response;
						console.log(encryptedData)

					},
					fail: (res) => {
						console.log(res);
					},
				});
			},
			gettoken() {
				my.getAuthCode({
					scopes: 'auth_base',
					success: res => {
						const authCode = res.authCode;
						homeApii.getopenid({
							code: authCode
						}).then(res => {
							console.log(res)
							if (res.code == 4000) {
								uni.setStorageSync("token", res.data.token)
							}
						})
					},
					fail: err => {
						console.log('my.getAuthCode 调用失败', err)
					}
				});
			},
			// getuserinfoo() {
			// 	my.getAuthCode({
			// 		scopes: 'auth_user',
			// 		success: res => {
			// 			const authCode = res.authCode;
			// 			console.log(authCode, "这是授权")
			// 		homeApii.getcard({authCode:authCode}).then(res=>{

			// 		})
			// 		},
			// 		fail: err => {
			// 			console.log('my.getAuthCode 调用失败', err)
			// 		}
			// 	});
			// },
			close() {
				this.show = false
			},
			goaita() {
				uni.navigateTo({
					url: "/pages/sousuo/search_city/index"
				})
			},
			getlocation() {
				my.getLocation({
					type: 1, // 获取经纬度和省市区县数据
					success: (res) => {
						console.log(res);
						this.city = res.city
						this.city = this.city.slice(0, -1);
						let iscity = false
						this.citylist.forEach((el) => {
							if (el == this.city) {
								iscity = true
							}
						})
						console.log(iscity)
						if (iscity) {
							let latitude = res.latitude
							let longitude = res.longitude
							uni.setStorageSync("city", this.city)
							uni.setStorageSync("latitude", latitude)
							uni.setStorageSync("longitude", longitude)
						} else {
							this.city = "全部"
							uni.setStorageSync("city", this.city)
							uni.removeStorageSync("latitude")
							uni.removeStorageSync("longitude")

						}

					},
					fail: (res) => {
						this.city = "全部"
						uni.setStorageSync("city", this.city)
						uni.removeStorageSync("latitude")
						uni.removeStorageSync("longitude")
					},
					complete: () => {},
				});
			},
			async navData() {
				//判断用户是否勾选了选项
				let isFirst = this.$store.state.doc.selectGroup.map((v, k) => {
					return v.list.reduce((pre, cur, index) => {
						if (cur.isChecked) pre = true
						return pre
					}, false)
				})
				let r = isFirst.includes(true) //筛选出的结果包含已勾选的[true,false,false,true]  有true就是勾选了，返回true
				if (!r) { //没有勾选的清空下再去请求
					let result = await searchNav('hos')
					this.$store.state.doc.selectGroup = result.data.selectGroup
					this.$store.state.doc.aiSortGroup = result.data.aiSortGroup
				}
			},
			goMyDetails(params) {
				if (params.title == "按疾病") {
					uni.navigateTo({
						url: "/pages/sousuo/search_type/index?type=jibing"
					})
					return
				}
				if (params.title == "按科室") {
					uni.navigateTo({
						url: "/pages/sousuo/search_type/index?type=keshi"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.shouye {
		background-color: #F5F6F8;
		padding-bottom: 100rpx;

		.shoutop {
			width: 93%;
			margin: 0 auto;
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;

			.city {
				font-size: 30rpx;
				line-height: 60rpx;
				display: flex;
				font-weight: bold;

				.cityicon {
					width: 20rpx;
					height: 20rpx;
					background-color: #fff;
					border-radius: 50%;
					text-align: center;
					line-height: 10rpx;
					margin-top: 18rpx;
					margin-left: 5rpx;

					image {
						width: 10rpx;
						height: 8rpx;
					}
				}
			}

			.sear {
				width: 85%;
			}
		}

		.navlist {
			width: 93%;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 15rpx;
			margin-top: 40rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;

			.navlistmain {
				width: 90%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;

				.navitem {
					width: 50%;
					display: flex;

					.naviteml {
						width: 95rpx;
						height: 95rpx;
						border-radius: 20rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}

					.navitemr {
						margin-left: 20rpx;

						.navitemrtit {
							font-size: 26rpx;
							line-height: 48rpx;
							font-weight: bold;
							color: #3D3D3D;
							margin-top: 5rpx;
						}

						.navitemrinfo {
							width: 200rpx;
							display: -webkit-box;
							overflow: hidden;
							text-overflow: ellipsis;
							word-wrap: break-word;
							white-space: normal !important;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							font-size: 20rpx;
							color: #999999;

						}
					}
				}
			}
		}

		.banner {
			width: 93%;
			margin: 20rpx auto;
			border-radius: 15rpx;

		}

		.jiuzhen {
			width: 93%;
			margin: 20rpx auto;
			border-radius: 15rpx;

			.jiuzhenbanner {
				height: 100%;

				.jiuzhenmain {
					width: 99%;
					margin: 0 auto;

					// height: 310rpx;
					.jiuzhenmainall {
						width: 99%;
						margin: 0 auto;
						background-color: #4581F6;
						border-radius: 15rpx;
						padding-bottom: 3rpx;
						overflow: hidden;

						.jiutop {
							width: 90%;
							margin: 30rpx auto;

							display: flex;
							justify-content: space-between;

							.jiutopl {
								display: flex;

								.jiuicon {
									width: 30rpx;
									height: 30rpx;

									image {
										width: 100%;
										height: 100%;
									}
								}

								.jiutopltit {
									margin-left: 10rpx;
									font-size: 32rpx;
									line-height: 30rpx;
									color: #fff;
									font-weight: bold;
								}
							}

							.jiutopr {
								display: flex;

								.jiutoprtit {
									margin-right: 10rpx;
									font-size: 24rpx;
									color: #fff;
									line-height: 30rpx;
									letter-spacing: 2rpx;
								}

								.jiudie {
									width: 30rpx;
									height: 30rpx;
									background-color: #fff;
									border-radius: 50%;
									text-align: center;
									line-height: 20rpx;

									image {
										width: 15rpx;
										height: 10rpx;
									}
								}
							}
						}

						.jiuzhenxin {
							width: 99%;
							margin: 0 auto;
							border-radius: 15rpx;
							background-color: #fff;
							overflow: hidden;
							padding-bottom: 20rpx;

							.jiuxinmain {
								width: 92%;
								margin: 0 auto;
								margin-top: 20rpx;
								overflow: hidden;

								.xintop {
									display: flex;
									margin-top: 20rpx;

									.xintopname {
										font-size: 35rpx;
										color: #3D3D3D;
										font-weight: bold;
										line-height: 30rpx;

									}

									.xintopdep {
										margin-left: 15rpx;
										background-color: #EFF7FF;
										color: #0F91F7;
										font-size: 20rpx;
										padding-left: 10rpx;
										line-height: 35rpx;
										height: 35rpx;
										padding-right: 10rpx;
										border-radius: 5rpx;
									}
								}

								.hosinfo {
									display: flex;
									justify-content: space-between;
									margin-top: 20rpx;

									.hosinfol {
										display: flex;

										.hosicon {
											width: 65rpx;
											height: 65rpx;
											border-radius: 50%;
											background-color: #4581F6;
											text-align: center;
											line-height: 75rpx;
											margin-top: 10rpx;

											image {
												width: 30rpx;
												height: 30rpx;
											}
										}

										.hosxin {
											margin-left: 20rpx;


											.hosname {
												width: 480rpx;
												font-size: 28rpx;
												font-weight: bold;
												line-height: 50rpx;
												color: #3D3D3D;
												display: -webkit-box;
												overflow: hidden;
												text-overflow: ellipsis;
												word-wrap: break-word;
												white-space: normal !important;
												-webkit-line-clamp: 1;
												-webkit-box-orient: vertical;

											}

											.hosaddress {
												width: 480rpx;
												font-size: 22rpx;
												color: #999999;
												display: -webkit-box;
												overflow: hidden;
												text-overflow: ellipsis;
												word-wrap: break-word;
												white-space: normal !important;
												-webkit-line-clamp: 1;
												-webkit-box-orient: vertical;

											}
										}
									}

									.hosinfor {
										width: 50rpx;
										height: 50rpx;
										border-radius: 50%;
										margin-top: 10rpx;
										text-align: center;
										border: 1rpx solid #EEEEEE;
										overflow: hidden;

										image {
											width: 30rpx;
											height: 30rpx;
											margin-top: 10rpx;
											border-radius: 50%;
										}
									}
								}
							}

							.jiubot {
								display: flex;
								margin-top: 30rpx;
								margin-bottom: 10rpx;

								.gogua {
									width: 170rpx;
									text-align: center;
									height: 40rpx;
									background-color: #4581F6;
									line-height: 40rpx;
									font-size: 20rpx;
									color: #fff;
									border-radius: 20rpx;
								}

								.jiuti {
									font-size: 20rpx;
									margin-left: 20rpx;
									line-height: 40rpx;
									color: #3D3D3D;
								}
							}
						}
					}
				}

			}

		}

		.notice {
			width: 93%;
			margin: 20rpx auto;
			background-color: #fff;
			border-radius: 15rpx;
			line-height: 80rpx;
			display: flex;

			.noticetit {
				margin-left: 20rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				color: #3D3D3D;
				font-weight: bold;
			}

			.nline {
				margin-left: 20rpx;
				color: #3D3D3D;
				font-size: 24rpx;
			}

			.ninfo {
				width: 500rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #979797;


				.noticeban {

					height: 80rpx;

					.contentn {
						width: 480rpx;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}

				}
			}
		}
	}
</style>